<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网规宝典 - 网络规划设计师练习宝典</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>网规宝典</h1>
        <p>网络规划设计师练习宝典</p>
    </header>

    <nav>
        <ul>
            <li><a href="#" id="practice-btn">练习模式</a></li>
            <li><a href="#" id="mock-btn">模拟考试</a></li>
            <li><a href="#" id="wrong-btn">错题本</a></li>
            <li><a href="#" id="import-btn">导入题目</a></li>
        </ul>
    </nav>

    <!-- 加载动画 -->
    <div id="loading-overlay" class="loading-overlay hidden">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载中...</div>
    </div>

    <main id="app">
        <div id="welcome" class="screen">
            <h2>欢迎使用网规宝典</h2>
            <p>专为网络规划设计师考试设计的练习软件</p>
            <div class="welcome-actions">
                <button id="start-practice">开始练习</button>
                <button id="start-exam">模拟考试</button>
            </div>
        </div>

        <div id="exam-setup" class="screen hidden">
            <h2>模拟考试设置</h2>
            <div class="exam-settings">
                <div class="setting-item">
                    <label for="exam-question-count">题目数量:</label>
                    <select id="exam-question-count">
                        <option value="20">20题</option>
                        <option value="50" selected>50题</option>
                        <option value="100">100题</option>
                        <option value="150">150题</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label for="exam-time-limit">考试时长:</label>
                    <select id="exam-time-limit">
                        <option value="30">30分钟</option>
                        <option value="60" selected>60分钟</option>
                        <option value="90">90分钟</option>
                        <option value="120">120分钟</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label for="exam-question-type">题目类型:</label>
                    <select id="exam-question-type">
                        <option value="all" selected>全部类型</option>
                        <option value="single">仅单选题</option>
                        <option value="multiple">仅多选题</option>
                    </select>
                </div>
            </div>
            <div class="exam-actions">
                <button id="start-exam-confirm">开始考试</button>
                <button id="back-to-welcome">返回主菜单</button>
            </div>
        </div>

        <div id="question-screen" class="screen hidden">
            <div class="question-info">
                <span id="question-count">第1题 / 共20题</span>
                <span id="question-type">单选题</span>
                <span id="exam-timer" class="exam-timer hidden">剩余时间: 00:00</span>
            </div>
            <div class="progress-container">
                <div class="progress-bar">
                    <div id="progress-fill" class="progress-fill"></div>
                </div>
                <span id="progress-text" class="progress-text">0%</span>
            </div>
            <div class="question-content">
                <h3 id="question-text">题目内容</h3>
                <div id="question-image" class="question-image hidden"></div>
                <div id="options-container">
                    <!-- 选项将通过JavaScript动态生成 -->
                </div>
            </div>
            <div class="question-actions">
                <button id="prev-btn">上一题</button>
                <button id="next-btn">下一题</button>
                <button id="submit-exam" class="submit-exam-btn hidden">提交试卷</button>
            </div>
        </div>

        <div id="result-screen" class="screen hidden">
            <h2>答题结果</h2>
            <div id="result-content">
                <!-- 结果将通过JavaScript动态生成 -->
            </div>
            <button id="review-wrong">查看错题解析</button>
            <button id="restart-btn">重新开始</button>
        </div>

        <div id="import-screen" class="screen hidden">
            <h2>题库管理</h2>
            
            <!-- 题库选择区域 -->
            <div class="question-bank-section">
                <h3>题库管理</h3>
                <div id="question-banks-list" class="question-banks-list">
                    <!-- 题库列表将通过JavaScript动态生成 -->
                </div>
                <div class="bank-actions">
                    <button id="refresh-banks" class="refresh-btn">刷新题库列表</button>
                    <button id="delete-bank" class="delete-btn" disabled>删除选中题库</button>
                    <button id="rename-bank" class="rename-btn" disabled>重命名题库</button>
                </div>
            </div>

            <!-- 导入新题库区域 -->
            <div class="import-section">
                <h3>导入新题库</h3>
                <div class="import-options">
                    <label>
                        <input type="radio" name="import-type" value="url" checked>
                        从网络URL导入
                    </label>
                    <label>
                        <input type="radio" name="import-type" value="text">
                        粘贴JSON数据
                    </label>
                </div>
                <textarea id="import-text" placeholder="请输入HTTP网页地址或粘贴题目JSON数据..."></textarea>
                <div class="import-actions">
                    <button id="import-submit">导入题库</button>
                    <button id="load-sample" class="secondary-btn">从文件加载题库</button>
                </div>
                <div id="import-result"></div>
            </div>

            <!-- 数据管理区域 -->
            <div class="data-management-section">
                <h3>数据管理</h3>
                <div class="data-actions">
                    <button id="export-all-data" class="export-all-btn">导出所有数据</button>
                    <button id="import-all-data" class="import-all-btn">导入数据备份</button>
                    <button id="clear-all-data" class="clear-all-btn">清空所有数据</button>
                </div>
                <input type="file" id="import-file-input" accept=".json" style="display: none;">
            </div>
        </div>

        <div id="wrong-book" class="screen hidden">
            <h2>错题本</h2>
            
            <!-- 错题统计信息 -->
            <div class="wrong-stats">
                <div class="stat-item">
                    <span class="stat-label">总错题数:</span>
                    <span id="total-wrong-count" class="stat-value">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已复习:</span>
                    <span id="reviewed-count" class="stat-value">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">正确率:</span>
                    <span id="accuracy-rate" class="stat-value">0%</span>
                </div>
            </div>

            <!-- 错题操作按钮 -->
            <div class="wrong-actions">
                <button id="practice-wrong" class="practice-btn">练习错题</button>
                <button id="clear-wrong" class="clear-btn">清空错题本</button>
                <button id="export-wrong" class="export-btn">导出错题</button>
            </div>

            <!-- 错题列表 -->
            <div id="wrong-questions-container">
                <!-- 错题将通过JavaScript动态生成 -->
            </div>
            
            <button id="back-to-main">返回主菜单</button>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 网规宝典 - 网络规划设计师练习宝典</p>
    </footer>

    <script src="js/app.js"></script>
</body>
</html>